<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar title="结业点评详情"></navbar>
		<view class="content" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="detail-box">
				<view class="detail">
					<view class="detail-data">
						<view class="detail-data-title">
							【{{detail.gangwei}}】
						</view>
						<!-- <view class="detail-data-line tag">
							<van-icon name="bookmark-o" color="#59a8ff" style="margin-right: 4upx;" />
							<text>{{detail.asSchool}}</text>-
							<text>{{detail.asSchool && detail.asMajor? '-'+detail.asMajor:detail.asMajor}}</text>
						</view> -->
						<!-- <view class="detail-data-info">
							<text>工作形式：{{detail.workType}}</text>
						</view> -->
						<view class="detail-data-info">
							<text>工作时间：{{detail.startTime.split(" ")[0]+'至'+detail.endTime.split(" ")[0]}}</text>
						</view>
					</view>
					<view class="detail-user">
						<view class="detail-user-picdir">
							<image :src="baseImage+detail.acAvatar" mode="" v-if="detail.acAvatar"></image>
							<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
						</view>
						<view class="detail-user-name">
							{{detail.acTitle}}
						</view>
					</view>
				</view>
				<view class="common">
					<view class="common-label">
						结业点评
					</view>
					<view class="common-line">
						<text>专业技能：</text>
						<van-rate v-model="detail.major" readonly color="#fbad17" void-icon="star" void-color="#c7c7c7" />
					</view>
					<view class="common-line">
						<text>工作态度：</text>
						<van-rate v-model="detail.attitude" readonly color="#fbad17" void-icon="star" void-color="#c7c7c7" />
					</view>
					<view class="common-line">
						<text>工作成绩：</text>
						<van-rate v-model="detail.score" readonly color="#fbad17" void-icon="star" void-color="#c7c7c7" />
					</view>
				</view>
			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {getRemarkDetail} from "@/core/web-api/qiyeduan.js"
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				detail: {
					title: "数据分析师",
					school: "重庆大学",
					major: "软件工程专业",
					jobType: "线上",
					jobStartDate: "2021-8-1",
					jobEndDate: "2021-9-1",
					name: "刘小帅",
					majorNum:4,
					workAttitudeNum:5,
					workResultNum:5
				},
				id:"",
			}
		},
		methods: {
			/**
			 * 获取详情
			 */
			getDetail(){
				getRemarkDetail({id:this.id}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail;
					}
				})
			},
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual'])
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail()
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;
			&-update{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 276upx;
				color: #666666;
			}
			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

	}

	.detail {
		&-box {
			width: 100%;
			margin-top: 36upx;
			position: static;
			z-index: 2;
			background-color: #fff;
			box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
			border-radius: 20upx;
			padding:30upx;
			box-sizing: border-box;
		}

		margin-bottom: 40upx;
		width: 100%;
		display: flex;

		&:last-child {
			margin-bottom: 0;
		}

		&-data {
			flex: 1;
			padding-right: 20upx;
			box-sizing: border-box;

			&-title {
				font-size: 30upx;
				color: #000000;
				font-weight: bold;
				margin-bottom: 6upx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 使用省略号表示超出部分 */
			}

			&-line {
				display: flex;
				align-items: center;

				text {
					font-size: 24upx;
					color: #4d4d4d;

				}

				&.tag {
					margin-bottom: 6upx;
				}
			}

			&-info {
				line-height: 28upx;

				text {
					font-size: 22upx;
					color: #808080;
				}
			}

			
		}

		&-user {
			display: flex;
			flex-direction: column;
			align-items: center;

			&-picdir {
				width: 118upx;
				height: 118upx;

				image {
					width: 118upx;
					height: 118upx;
					border-radius: 50%;
				}
			}

			&-name {
				margin-top: 10upx;
				font-size: 30upx;
				color: #4d4d4d;
			}
		}
	}

	.common{
		border-top: 3upx solid #f5f5f5;
		padding-top: 40upx;
		&-label{
			font-size: 30upx;
			color:#000;
			margin-bottom: 30upx;
		}
		&-line{
			margin-bottom: 15upx;
			display: flex;
			align-items: center;
			&:last-child{
				margin-bottom: 0;
			}
			text{
				font-size: 24upx;
				color: #808080;
			}
		}
	}
	
</style>